<template>
  <div class="course-content-list">
      <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <van-cell v-for="item in list" :key="item.id"
              @click="$router.push({
                name: 'CourseInfo',
                params: {
                  courseId: item.id
                }
              })">
                <!-- 左侧图片 -->
            <div>
                <img :src="item.courseImgUrl || item.image"/>
            </div>
            <!-- 右侧信息 -->
            <div class="course-info">
                <h3 v-text="item.courseName || item.name"></h3>
                <p class="course-preview" v-html="item.previewFirstField"></p>
                <!-- 如果为已购课程，无需显示价格区域 -->
                <p v-if="item.price" class="price-container">
                <span class="cource-discount">￥{{item.discounts}}</span>
                <s class="course-price">￥{{item.price}}</s>
                </p>
            </div>

            </van-cell>
        </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: {
    fetchData: {
      type: Function,
      require: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      isRefreshing: false,
      form: {
        currentPage: 0,
        pageSize: 10,
        status: 1
      }
    }
  },
  methods: {
    onRefresh () {
      this.form.currentPage = 1
      // 重新请求数据
      this.onLoad()
    },
    async onLoad () {
      const { data } = await this.fetchData(this.form)
      if (this.form.currentPage === 1) {
        if (data.data && data.data.records) {
          this.list = data.data.records
        } else {
          this.list = data.content
        }
      } else {
        if (data.data && data.data.records) {
          this.list.push(...data.data.records)
        } else {
          this.list.push(...data.content)
        }
      }
      // 为下一页做准备
      this.form.currentPage++
      // 加载结束
      console.log(data)
      this.loading = false
      // 关闭下拉框
      if (this.isRefreshing) {
        this.isRefreshing = false
        this.$toast('刷新成功')
      }
      // 数据全部加载完成
      if (data.data && data.data.records && data.data.records.length < 10) {
        this.finished = true
      } else if (data.content && data.content.length < 10) {
        this.finished = true
      } else {}
    }
  }
}
</script>

<style scoped>
/* 固定列表位置 */
.course-content-list{
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* 课程列表项样式 */
.van-cell__value{
  display: flex;
  height: 100px;
  padding: 10px 0;
}
.van-cell__value img{
    height: 100%;
    width: 75px;
    border-radius: 5px;
}
.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
.course-info .course-preview{
  flex-grow: 1;
}
.course-info .cource-discount{
    color: #ff7452;
    margin-right: 5px;
}
p, h3{
    margin: 0;
}

</style>
